<template>
  <div class="font-bold">
    PluginDemo
  </div>
</template>

<script lang="ts" setup>

const add = (a: number, b: number) => {
  return a + b;
}
const sub = (a: number, b: number) => {
  return a - b;
}
const mul = (a: number, b: number) => {
  return a * b;
}
const div = (a: number, b: number) => {
  return a / b;
}

class Calculator {
    calculators: Map<string, (...args: number[]) => void>;
  constructor() {
    this.calculators = new Map();
  }
  addPlugin(plugin: (...args: number[]) => void) {
    const name = plugin.name;
    const has = this.calculators.has(name);
    if (!has) {
      this.calculators.set(name, plugin);
    }
  }
  calculate(a: number, b: number, name: string) {
    const plugin = this.calculators.get(name);
    if (plugin) {
      return plugin(a, b);
    }
    return null;
  }
}
const calculator = new Calculator();
calculator.addPlugin(add);
calculator.addPlugin(sub);
calculator.addPlugin(mul);
calculator.addPlugin(div);
console.log(calculator.calculate(1, 2, 'add'));
console.log(calculator.calculate(1, 2, 'sub'));
console.log(calculator.calculate(1, 2, 'mul'));
console.log(calculator.calculate(1, 2, 'div'));

</script>

